<template>
    <s-layout id="layout" :title="'填写邮寄信息'" navbar="normal" leftIconColor="#ffffff" :autoBack="true" :bgColor="'rgba(0,0,0,0)'" :tabbarshow='false' :titleStyle="{ color: '#ffffff', fontSize: '32rpx',fontWeight:'600' }">
        <!-- 最大盒子 -->
        <view class="container" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/staff_project_arrange.png)`,paddingTop:(safeAreaInsets?.top + 44) + 'px'}">
            <view class="area form_box">
                <scroll-view scroll-y style="height:78vh" :enable-back-to-top="true" v-if="detail_Data">
                    <view class="totality_box">
                        <view class="top_item">
                            <view class="head_box">
                                <view class="avatar_box">
                                    <image :src="`${baseUrl}` + detail_Data.user.avatar" mode="aspectFill"/>
                                </view>
                                <view class="message">
                                    <view class="title">{{ detail_Data.user.nickname }}提交的合同</view>
                                    <view class="time">{{ formatDatetime(detail_Data.createtime) }} 提交</view>
                                </view>
                            </view>
                            <!-- 详情盒子 -->
                            <view class="detail_box">
                                <!-- 项目 -->
                                <view class="detail_item">
                                    <view class="label_box">部门:</view>
                                    <view class="content_box">{{ detail_Data.department?.company.name }}/{{  detail_Data.department.name }}</view>
                                </view>
                                <!-- 公司名称 -->
                                <view class="detail_item">
                                    <view class="label_box">公司名称:</view>
                                    <view class="content_box">{{ detail_Data.company_name }}</view>
                                </view>
                                <!-- 邮寄城市 -->
                                <view class="detail_item">
                                    <view class="label_box">邮寄城市:</view>
                                    <view class="content_box">{{ detail_Data.mail_city }}</view>
                                </view>
                                <!-- 合作业务 -->
                                <view class="detail_item">
                                    <view class="label_box">合作业务:</view>
                                    <view class="content_box">{{ detail_Data.business }}</view>
                                </view>
                                <!-- 详细地址 -->
                                <view class="detail_item_address">
                                    <view class="label_box_address">详细地址:</view>
                                    <view class="content_box_address">{{ detail_Data.address }}</view>
                                </view>

                            </view>
                        </view>
                        <view class="bottom_item">
                            <view class="message">
                                邮寄填写
                                <view class="glide"></view>
                            </view>
                            <u--form labelPosition="left" :model="FormData" :rules="rules" ref="formRole" :borderBottom="false">
                                <!-- 单号 -->
                                <u-form-item :required="true" :borderBottom="false" :labelWidth="100" label="单号：" prop="tracking_num" ref="tracking_num">
                                    <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" type="text" placeholder="请输入单号" v-model="FormData.tracking_num" border="none"></u--input>
                                </u-form-item>

                                <!-- 快递公司 -->
                                <u-form-item :required="true" :borderBottom="false" :labelWidth="100" label="快递公司：" prop="tracking_company" ref="tracking_company">
                                    <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" type="text" placeholder="请输入快递公司" v-model="FormData.tracking_company" border="none"></u--input>
                                </u-form-item>

                                <!-- 接收人姓名 -->
                                <u-form-item :required="true" :borderBottom="false" :labelWidth="100" label="接收人姓名：" prop="recipients" ref="recipients">
                                    <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" type="text" placeholder="请输入接收人姓名" v-model="FormData.recipients" border="none"></u--input>
                                </u-form-item>

                                <!-- 接收人电话 -->
                                <u-form-item :required="true" :borderBottom="false" :labelWidth="100" label="接收人电话：" prop="recipients_tel" ref="recipients_tel">
                                    <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" type="text" placeholder="请输入接收人电话" v-model="FormData.recipients_tel" border="none"></u--input>
                                </u-form-item>

                                <!-- 回收地址 -->
                                <u-form-item :required="true" :borderBottom="false" :labelWidth="100" label="回收地址：" prop="recipients_address" ref="recipients_address">
                                </u-form-item>
                                <view class="textarea_box">
                                    <up-textarea height="80" v-model="FormData.recipients_address" placeholder="请输入详细地址" ></up-textarea>
                                </view>
                                
                            </u--form>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>

    </s-layout>

    <!-- 底部保存按钮 -->
    <view>
        <s-button @netWork="submitForm" :text="'提交'" />
    </view>
</template>

<script setup>
    import sheep from '@/sheep';
    import { ref, reactive } from 'vue';
    import { onLoad } from '@dcloudio/uni-app';
    import { baseUrl } from "@/sheep/config";
    import { formatDatetime } from '@/utils/fn.js';
    import { isEmpty } from '@/sheep/helper/utils.js'
    import { province,city } from '../evection/city.js'
    const { safeAreaInsets } = uni.getSystemInfoSync()
    onLoad((option) => {
        FormData.ids = option.ids
        contract_traceabilityViewData(option.ids)
    })
        // 表单数据
    const FormData = reactive({
        ids:'',
        tracking_num:'',             // 快递单号
        tracking_company:'',         // 快递公司
        recipients:'',               // 收件人
        recipients_tel:'',           // 收件人电话
        recipients_address:'',       // 收件人地址
    })

    // 表单校验
    // 电话号验证格式
    const mobileReg = /^1[3-9]\d{9}$/;
    const rules = {
        tracking_num:[
            {
                required:true,
                message:'请输入快递单号',
            },
            {
                type: 'number',
                message: '快递单号必须为数字格式',
            }
        ],
        tracking_company:[
            {
                required:true,
                message:'请输入快递公司',
            },
        ],
        recipients:[
            {
                required:true,
                message:'请输入收件人',
            },
        ],
        recipients_tel:[
            {
                required:true,
                message:'请输入收件人电话',
            },
            {
                type: 'number',
                message: '电话号码必须为数字格式',
            },
            {
                pattern: mobileReg,
                message: '手机号格式不正确',
            }
        ],
        recipients_address:[
            {
                required:true,
                message:'请输入收件人地址',
            },
        ]
    }

    // 封装获取详情接口
    const detail_Data = ref()
    const contract_traceabilityViewData = async (ids) => {
        let params = {
            ids:ids
        }
        const res = await sheep.$api.contract_traceability.contract_traceabilityViewAPI(params)
        detail_Data.value = res.data
    }

    const formRole = ref(null)
    // 表单提交
    const submitForm = () => {
        formRole.value.validate().then(async (res)=> {
            const resust = await sheep.$api.contract_traceability.contract_traceabilityEditAPI(FormData);
            if(resust.code == 1) {
                setTimeout(() => {
                    sheep.$router.back(true)
                },1000)
            } else {
                setTimeout(()=> {
                    sheep.$helper.toast(res.msg);
                    // uni.showToast({
                    //     title:res.msg,
                    //     icon:'none'
                    // })
                },1000)
            }
        }).catch((err) => {})
    }

</script>

<style lang="scss" scoped>

    :deep(.u-form-item__body){
        height: 80rpx;
        margin-bottom:10rpx;
    }

    // :deep(.u_form-item) {
    //     &:not(:nth-last-child(2)) {
    //         .u-form-item__body {
    //             height: 80rpx;
    //             background-color: red !important;
    //         }
    //     }
    // }

    // uview 内部样式 u-form-item 背景颜色
    // :deep(.u-form-item){
    //     &:nth-last-child(1) {
    //         .u-form-item__body {
    //             margin-bottom:10rpx;
    //             background-color: #F9FAFF !important;
    //         }
    //     }
    //     &:nth-last-child(4) {
    //         .u-form-item__body {
    //             margin-bottom:10rpx;
    //             background-color: #ffffff !important;
    //         }
    //     }
    // }
    :deep(.u-form-item) {
        &:not(:nth-last-child(2)) {
            .u-form-item__body {
                background-color: #F9FAFF !important;
            }
        }
    }

    :deep(.u-textarea.data-v-31706dd7) {
        background-color: #F9FAFF;
        padding: 0;
        margin-bottom:10rpx;
    }

    // uview 内部样式 表单验证 警告文字距离
    :deep(.u-form-item__body__right__message.data-v-b4fd400b) {
        margin-left: 0 !important;
    }

    // uview 内部样式 up-textarea 文字距离
    :deep(.u-textarea__field.data-v-31706dd7) {
        margin-top: 30rpx;
        margin-left: 30rpx;
    }

    // uview 内部样式 输入内容右边间距
    :deep(.u-input__content__field-wrapper__field.data-v-5904192e) {
        margin-right: 20rpx;
    }

    // uview 内部样式 label左边间距
    :deep(.u-form-item__body__left.data-v-b4fd400b) {
        margin-left: 20rpx;
    }

    // uview 内部样式 label字体粗细
    :deep(.u-form-item__body__left__content__label.data-v-b4fd400b) {
        font-weight: $uni-font-weight;
    }

    // 最大盒子
    .container {
        width: 100%;
        background-size: cover; /* 或 contain */
    }
    // 版心
    .area {
        width: calc(100% - 40rpx);
        margin: 0 20rpx;
    }

    // 表单盒子
    .form_box {
        width: calc(100% - 40rpx);
        // padding: 60rpx 30rpx;
        margin-top: 20rpx;
        // border-radius: 16rpx;
        // background-color: #FFFFFF;
        // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    }
    // 备注
    .remark {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: 30rpx;
        font-style: normal;
        text-decoration: none;
    }

    // 用户信息
    .totality_box {
        // 用户信息盒子
        .head_box {
            height: 164rpx;
            background-color: $uni-bg-color;
            border-bottom: 2rpx solid #efefef;
            display: flex;
            align-items: center;
            // 头像盒子
            .avatar_box {
                width: 104rpx;
                height: 104rpx;
                border-radius: 50%;
                margin-right: 30rpx;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            // 信息盒子
            .message {
                .title {
                    font-family: PingFangSC;
                    color: $uni-text-color;
                    font-weight: $uni-font-weight;
                    font-size: 30rpx;
                    font-style: normal;
                    text-decoration: none;
                    text-align: left;
                    margin-bottom: 12rpx;
                }
                .time {
                    font-family: PingFangSC;
                    color: #999999;
                    font-weight: 500;
                    font-size: $uni-font-size-sm;
                    font-style: normal;
                    text-decoration: none;
                    text-align: left;
                }
            }
        }
    }

    .top_item {
        height: 850rpx;
        background-color: $uni-bg-color;
        padding: 0rpx 30rpx 40rpx 30rpx;
        border-radius: 16rpx;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
        
    }
    .bottom_item {
        height: 900rpx;
        background-color: $uni-bg-color;
        padding: 40rpx 30rpx;
        margin-top: 20rpx;
        border-radius: 16rpx;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
        // 邮寄填写盒子
        .message {
            display: flex;
            justify-content: space-between; /* 左右对齐 */
            width: 100%;
            height: 48rpx;
            margin-bottom: 30rpx;
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: 34rpx;
            font-style: normal;
            text-decoration: none;
            position: relative;
            .glide {
                width: 92rpx;
                height: 14rpx;
                border-radius: 5px;
                background-color: rgba(0, 56, 247, 0.5);
                position: absolute;
                bottom: 0;
                left: 20rpx;
            }
        }
    }

    // 详情盒子
    .detail_box {
        height: 590rpx;
        margin-top: 60rpx;
            // 详情每一项
        .detail_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 64rpx;
            // 详情标题
            .label_box {
                font-family: PingFangSC;
                color: #666666;
                font-weight: $uni-font-weight;
               font-size:$uni-font-size-26;
                font-style: normal;
                text-decoration: none;
            }
            // 详情内容
            .content_box {
                font-family: PingFangSC;
                color: $uni-text-color;
                font-weight: $uni-font-weight;
               font-size:$uni-font-size-26;
                font-style: normal;
                text-decoration: none;
                text-align: right;
            }
        }
            // 详情地址
        .detail_item_address {
            .label_box_address {
                width: 100%;
                height: 80rpx;
                font-family: PingFangSC;
                color: #666666;
                font-weight: $uni-font-weight;
               font-size:$uni-font-size-26;
                font-style: normal;
                text-decoration: none;
            }
            .content_box_address {
                height: 96rpx;
                font-family: PingFangSC;
                color: $uni-text-color;
                font-weight: $uni-font-weight;
               font-size:$uni-font-size-26;
                font-style: normal;
                text-decoration: none;
                padding: 32rpx 30rpx;
                background-color: #F9FAFF;
                border-radius: 16rpx;
            }
        }
    }
</style>


